<template>
	<view class="">
		<view class="me-fx-row-sb-c warp">
			<block v-if="havePicList.length > 0">
				
				<block v-for="(item, index) in havePicList">
					<view class="picBoxVideo " v-if="item.type=='2'">
						<video id="myVideo" class="myVideo" :src="item.file" show-fullscreen-btn></video>
						<view class="picXX">
							<image src="../../static/img/xx.png" mode="" @click="picXX(item.id)"></image>
						</view>
					</view>
				</block>
				<block v-for="(item, index) in havePicList">
					<view class="picBox " v-if="item.type=='1'">
						<image :src="item.file" mode=""></image>
						<view class="picXX">
							<image src="../../static/img/xx.png" mode="" @click="picXX(item.id)"></image>
						</view>
					</view>
				</block>
			</block>
			<view class="uploadingBtn" @click="uploadingBtn">
			</view>
			<view class="picBox ">
			</view>
		</view>
		<!-- 相册隐私 -->
		<view class="Covering" v-if="selectListShow">
			<view class="bottomFiex">
				<view class="FiexTop" v-if="picShow">
					<view class="selectList">
						选择上传类型
					</view>
					<view class="" @click="selectBtn(item.id,item.name)" v-for="(item, index) in selectList">
						{{item.name}}
					</view>
				</view>
				<view class="FiexTop" v-if="jurisdiction">
					<view class="titleLeft">
						该图片阅览权限
					</view>
					<view class="left" @click="jurisdictionBtn(item.name,item.id,index)" v-for="(item, index) in jurisdictionList">
						{{item.name}}
					</view>
				</view>
				<view class="FiexBottom" @click="selectListShow=false">
					取消
				</view>
			</view>
		</view>
		<!-- 查看相册 -->
		<view class="Covering" v-if="lookHbShow">
			<view class="lookHb">
				<view class="titleWeight">
					设置查看该照片所需的红包
				</view>
				<input type="text" value="" placeholder="请输入金额" v-model="inputValu"/>
				<view class="btnBox me-fx-row-sb-c">
					<view class="lookCancel" @click="lookHbShow=false">
						取消
					</view>
					<view class="lookSure" @click="surePay">
						确定
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		url
	} from '@/utils/api'
	export default {
		data() {
			return {
				havePicList: [],
				selectListShow: false,
				selectList: [],
				jurisdictionList: [],
				picShow: false,
				jurisdictionID: -1,
				upLoadurl: '',
				lookHbShow:false,
				inputValu:'',
			}
		},
		created() {
			this.phoneQX()
			this.typeData()
			this.picQX()
		},
		methods: {
			surePay(){
				if(this.inputValu == ''){
					uni.showToast({
						title: '请输入金额',
						duration: 1000,
						icon: 'none'
					})
				}else {
					console.log(this.type,'type')
					if(this.type == '1'){
						uni.chooseImage({
							success: (chooseImageRes) => {
								console.log(chooseImageRes, 'chooseImageRes')
								const tempFilePaths = chooseImageRes.tempFilePaths;
								uni.uploadFile({
									url: url + '/image/upload', //仅为示例，非真实的接口地址
									filePath: tempFilePaths[0],
									fileType: 'image',
									success: (res) => {
										this.selectListShow = false
										let resData = JSON.parse(res.data)
										if (resData.code == 200) {
											this.upLoadurl = resData.url
											let data = {
												type: this.type,
												permission: this.id,
												file: this.upLoadurl,
												fee:this.inputValu,
											}
											this.$u.post('/user/album/file/add', data).then(res => {
													if (res) {
														this.havePicList.push(this.upLoadurl)
														this.picFontShow = false
														this.phoneQX()
														this.lookHbShow=false
													}
												})
												.catch((res) => {
													console.log(res.message)
												})
										}
									}
								});
							}
						});
					}else{
						console.log('111')
						this.chooseVideo()
						let data = {
							type: this.type,
							permission: this.id,
							file: this.upLoadurl,
							fee:this.inputValu
						}
						this.$u.post('/user/album/file/add', data).then(res => {
								if (res) {
									this.havePicList.push(this.upLoadurl)
									this.picFontShow = false
									this.phoneQX()
								} else {
									this.picFontShow = false
								}
							})
							.catch((res) => {
								console.log(res.message)
							})
					}
					
			
			}
			},
			picQX() {
				this.$u.get('/user/album/status_list').then(res => {
						if (res) {
							this.jurisdictionList = res.data.data
						}
					})
					.catch((res) => {
						console.log(res.message)
					})
			},
			typeData() {
				this.$u.get('/user/album/file/type_list').then(res => {
						if (res) {
							this.selectList = res.data.data
							console.log(this.selectList, 'this.selectList')
						}
					})
					.catch((res) => {
						console.log(res.message)
					})
			},
			selectBtn(id, name) {
				this.selectListShow = true
				this.jurisdiction = true
				this.picShow = false
				this.type = id
				if (name == '视频') {
					this.val = 'video'
				} else {
					this.val = 'image'
				}
			},
			jurisdictionBtn(name, id,index) {
				console.log(index +1)
				if((index + 1)== 2){
					this.lookHbShow= true
				}else {
					this.upload();
				}
				this.selectListShow=false
				this.id = id
			},
			upload() {
				if (this.type == '1') {
					uni.chooseImage({
						success: (chooseImageRes) => {
							console.log(chooseImageRes, 'chooseImageRes')
							const tempFilePaths = chooseImageRes.tempFilePaths;
							uni.uploadFile({
								url: url + '/image/upload', //仅为示例，非真实的接口地址
								filePath: tempFilePaths[0],
								fileType: 'image',
								success: (res) => {
									this.selectListShow = false
									let resData = JSON.parse(res.data)
									if (resData.code == 200) {
										this.upLoadurl = resData.url
										this.uploadPhone();
									}
								}
							});
						}
					});
				} else {
					this.chooseVideo()
				}
			},
			uploadPhone() {
				let data = {
					type: this.type,
					permission: this.id,
					file: this.upLoadurl
				}
				this.$u.post('/user/album/file/add', data).then(res => {
						if (res) {
							this.havePicList.push(this.upLoadurl)
							this.picFontShow = false
							this.phoneQX()
						}
					})
					.catch((res) => {
						console.log(res.message)
					})

			},
			picXX(id) {
				console.log(id, 'id')
				this.$u.delete('/user/album/file/delete', {
						id
					}).then(res => {
						if (res) {
							uni.showToast({
								title: res.message,
								duration: 1000,
								icon: 'none'
							})
							this.phoneQX()
						}
					})
					.catch((res) => {
						console.log(res.message)
					})
			},
			uploadingBtn() {
				this.selectListShow = true
				this.picShow = true
				this.jurisdiction = false
			},
			phoneQX() {
				this.$u.get('/user/album/index').then(res => {
						if (res) {
							if (res.data.data.file) {
								this.havePicList = res.data.data.file
							} else {
								this.havePicList = res.data.data
							}
						}
					})
					.catch((res) => {
						console.log(res.message)
					})
			},
			chooseVideo() {
				uni.chooseVideo({
					maxDuration: 45,
					count: 1,
					camera: 'video',
					sourceType: ['camera'],
					success: (res) => {
						uni.uploadFile({
							url: url + '/image/upload', //仅为示例，非真实的接口地址
							filePath: res.tempFilePath,
							fileType: 'image',
							success: (res) => {
								console.log(res, 'reee')
								let resData = JSON.parse(res.data)
								if (resData.code == 200) {
									this.upLoadurl = resData.url
									this.uploadPhone();
									this.selectListShow = false
									this.lookHbShow=false
								

								}
							}
						});

					}
				})
			},

		}
	}
</script>

<style>
	.warp {
		width: 92%;
		margin: auto;
		flex-wrap: wrap;
		padding: 20rpx 0;
	}

	.picBox {
		width: 220rpx;
		height: 220rpx;
		border-radius: 6rpx;
		position: relative;
		margin-bottom: 16rpx;
	}

	.picBox image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.picBox video {
		width: 100%;
		height: 100%;
		display: block;
	}

	.shareXX {
		width: 47rpx;
		height: 46rpx;
		display: block;
		position: fixed;
		bottom: 20rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.myBox /deep/.uni-navbar--fixed {
		width: 100%;
	}

	.picXX {
		position: absolute;
		top: -10rpx;
		right: -10rpx;
		width: 48rpx;
		height: 48rpx;
		background: rgba(0, 0, 0, 1);
		box-shadow: 0rpx 3rpx 10rpx 0rpx rgba(34, 37, 57, 0.15);
		opacity: 0.4;
		border-radius: 50%;
	}

	.picBox .picXX image {
		width: 26rpx;
		height: 26rpx;
		display: block;
		margin: 50% auto;
		transform: translateY(-50%);
	}

	.uploadingBtn {
		width: 220rpx;
		height: 220rpx;
		border: 1rpx dashed #CBB4FE;
		position: relative;
		margin-bottom: 16rpx;
	}

	.picBoxVideo {
		width: 220rpx;
		height: 220rpx;
		margin-bottom: 16rpx;
		position: relative;
	}

	.myVideo {
		width: 100%;
		height: 100%;
	}

	.uploadingBtn::before {
		content: '';
		width: 80rpx;
		height: 2rpx;
		background-color: #CBB4FE;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.uploadingBtn::after {
		content: '';
		width: 2rpx;
		height: 80rpx;
		background-color: #CBB4FE;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.bottomFiex {
		width: 96%;
		position: fixed;
		bottom: 100rpx;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		font-size: 36rpx;
	}

	.lookHb {
		width: 90%;
		background-color: white;
		border-radius: 6rpx;
		margin: 40% auto;
	}

	.bottomFiex .FiexTop {
		background-color: white;
		border-radius: 6rpx;
	}

	.FiexTop view {
		height: 110rpx;
		line-height: 110rpx;
		font-size: 32rpx;
	}

	.FiexTop view:nth-of-type(n-1) {
		border-bottom: 1rpx solid #999;
	}

	.FiexBottom {
		background-color: white;
		height: 110rpx;
		line-height: 110rpx;
		border-radius: 6rpx;
		margin-top: 30rpx;
	}

	.bottomBorder {
		border-top: 1rpx solid rgba(236, 235, 235, 1);
	}

	.selectList {
		color: #999999;
	}

	.titleLeft {
		text-align: left;
		font-weight: 700;
		padding-left: 38rpx;
	}

	.FiexTop .left {
		text-align: left;
		padding-left: 38rpx;
	}
	.lookHb {
		width: 90%;
		background-color: white;
		border-radius: 6rpx;
		margin: 40% auto;
	}
	
	.bottomFiex .FiexTop {
		background-color: white;
		border-radius: 6rpx;
	}
	
	.FiexTop view {
		height: 110rpx;
		line-height: 110rpx;
		font-size: 32rpx;
	}
	
	.FiexTop view:nth-of-type(n-1) {
		border-bottom: 1rpx solid #999;
	}
	
	.FiexBottom {
		background-color: white;
		height: 110rpx;
		line-height: 110rpx;
		border-radius: 6rpx;
		margin-top: 30rpx;
	}
	
	.bottomBorder {
		border-top: 1rpx solid rgba(236, 235, 235, 1);
	}
	
	.selectList {
		color: #999999;
	}
	
	.titleLeft {
		text-align: left;
		font-weight: 700;
		padding-left: 38rpx;
	}
	
	.FiexTop .left {
		text-align: left;
		padding-left: 38rpx;
	}
	
	.lookHb {
		padding: 50rpx 38rpx;
	}
	
	.lookHb .titleWeight {
		font-weight: 700;
		font-size: 36rpx;
	}
	
	.lookHb input {
		width: 614rpx;
		height: 120rpx;
		background: rgba(255, 255, 255, 1);
		border: 1rpx solid rgba(237, 237, 237, 1);
		border-radius: 8rpx;
		font-size: 32rpx;
		line-height: 120rpx;
		margin: 39rpx 0 62rpx;
		padding-left: 31rpx;
		font-size: 32rpx;
		color: rgba(51, 51, 51, 1);
		box-sizing: border-box;
	}
	.btnBox .lookSure {
		background-color: #824CFE;
		color: white;
	}
	
	.btnBox .lookCancel {
		background: rgba(255, 255, 255, 1);
		color: #824CFE;
	}
	.btnBox view {
		width: 292rpx;
		height: 88rpx;
		border: 1rpx solid rgba(130, 76, 254, 1);
		border-radius: 10px;
		text-align: center;
		line-height: 88rpx;
	}
	.lookHb .titleWeight {
		font-weight: 700;
		font-size: 36rpx;
	}
</style>
